<script setup>
import MoonNav from '@/components/MoonNav.vue';
import { LyTypewriter } from 'last-year-components';
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { blogcha } from '@/api/bloglist';
/* 首页背景 start */
const canvas = ref(null);
let ctx = null;
let animationFrameId = null; // 用于存储requestAnimationFrame的ID
let circles = []; // 将circles定义在外部，以便在onBeforeUnmount中访问

// 将resizeCanvas函数定义在组件的顶层作用域
function resizeCanvas () {
  canvas.value.width = window.innerWidth;
  canvas.value.height = window.innerHeight;
  initCircles();
}

function initCircles () {
  circles = [];
  const circleCount = Math.floor(window.innerWidth / 180);
  for (let i = 0; i < circleCount; i++) {
    const radius = randomBetween(300, 320);
    const x = randomBetween(radius, canvas.value.width - radius);
    const y = randomBetween(radius, canvas.value.height - radius);
    const dx = randomBetween(-2, 2);
    const dy = randomBetween(-2, 2);
    const color = colors[Math.floor(Math.random() * colors.length)];
    circles.push({ x, y, dx, dy, radius, color });
  }
}

function drawCircle (circle) {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);
  ctx.fillStyle = circle.color;
  ctx.fill();
  ctx.closePath();
}

function animate () {
  if (!ctx) return; // 如果ctx为null，直接返回
  animationFrameId = requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
  circles.forEach((circle) => {
    circle.x += circle.dx * 0.7;
    circle.y += circle.dy * 0.7;
    const offset = circle.radius * 0.5;
    if (circle.x + circle.radius > canvas.value.width + offset ||
      circle.x - circle.radius < -offset) {
      circle.x = Math.min(Math.max(circle.x, -offset), canvas.value.width + offset - circle.radius);
      circle.dx = -circle.dx;
    }
    if (circle.y + circle.radius > canvas.value.height + offset ||
      circle.y - circle.radius < -offset) {
      circle.y = Math.min(Math.max(circle.y, -offset), canvas.value.height + offset - circle.radius);
      circle.dy = -circle.dy;
    }
    drawCircle(circle);
  });
}

function randomBetween (N, M) {
  return Math.random() * (M - N) + N;
}

// 色域
const colors = ['#836fff', '#15f5ba', '#69f2ff'];

onMounted(() => {
  const el = canvas.value;
  ctx = el ? el.getContext('2d') : null;
  if (!ctx) return; // 如果ctx为null，直接返回

  document.body.style.backgroundColor = '#211951';

  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
  initCircles();
  animate();
});

onBeforeUnmount(() => {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId); // 取消动画帧
  }
  window.removeEventListener('resize', resizeCanvas); // 移除resize事件监听器
  document.body.style.backgroundColor = ''; // 销毁背景色
});
/* 首页背景 end */
/* 搜索模块 start */
let moonInp = ref('')
/* 搜索模块 end*/

/*  名人名言模块 start */
let moontitle = ref('')
/*  名人名言模块 end*/

/* 打字机模块 start */
const options = {
  // el: '.moon-title',
  content: 'Moon-Blog',
  startSpeed: 150,
  endSpeed: 150,
  waitTime: false,
  isWay: 'loop'
}
// 注册
const lyTypewriter = new LyTypewriter(options)
// 实例化
lyTypewriter.typeCharacter()
// 
lyTypewriter.on('character', (data) => {
  // lyTypewriter.typeCharacter()  //当前打字的内容
  //当前打字轮次是否结束
  // console.log(data)
  moontitle.value = data.content
})
/* 打字机模块 end */
/* 搜索模块 */
let serachdata = ref('')
let inp = ref('')
const so = async () => {
  const res = await blogcha({ title: inp.value })
  console.log(res.data)
  serachdata.value = ''
  serachdata.value = res.data
}
const dels = () => {
  inp.value = ''
  serachdata.value = ''
}
</script>

<template>
  <!-- 首页背景 start -->
  <section>
    <div class="hero">
      <MoonNav></MoonNav>
      <canvas id="canvas" ref="canvas" width="500" height="500"></canvas>
      <!-- 搜索模块 -->
      <!-- <div class="moon-time">00:00:00</div> -->
      <div class="moon-sarch">
        <!-- Moon-Blog -->
        <h1 class="moon-title">{{ moontitle }}</h1>
        <div class="moon-inputs">
          <i class="iconfont icon-sousuo sosuo"></i>
          <input type="text" v-model="inp" @keyup.enter="so">
          <i class="iconfont icon-shanchu del" @click="dels"></i>
        </div>
        <div class="xianshi" v-if="serachdata?.length > 0">
          <div class="xianitem" v-for="item in serachdata">{{ item.title }}</div>
        </div>
        <div class="container">
          <div class="color"></div>
          <div class="color"></div>
          <div class="color"></div>
          <ul>
            <li>
              <a href="#"><i class="fa fa-qq" aria-hidden="true"><i class="vf iconfont icon-weixin"></i></i></a>
            </li>
            <li>
              <a href="#"><i class="fa fa-weixin" aria-hidden="true"><i
                    class="vf iconfont icon-xinlangweibo"></i></i></a>
            </li>
            <li>
              <a href="#"><i class="fa fa-weibo" aria-hidden="true"><i class="vf iconfont icon-QQ"></i></i></a>
            </li>
            <li>
              <a href="#"><i class="fa fa-tencent-weibo" aria-hidden="true"><i
                    class="vf iconfont icon-dianhua"></i></i></a>
            </li>
            <li>
              <a href="#"><i class="fa fa-telegram" aria-hidden="true"><i class="vf iconfont icon-youxiang"></i></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </section>
  <!-- 首页背景 end -->
</template>

<style lang="less" scoped>
/* 首页背景 start */



.hero {
  width: 100%;
  height: 100%;
  min-height: 30em;
  display: flex;
  justify-content: center;
  align-items: center;

  // 搜索模块
  .moon-sarch {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    width: 500px;
    height: 200px;
    // background: pink;;
    transform: translate(-50%, -50%);

    // 标题
    .moon-title {
      width: 500px;
      height: 80px;
      line-height: 80px;
      font-size: 50px;
      text-align: center;
      background: linear-gradient(to left, #2ad1a5, #7d6eda);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      transition: all .8s linear;
    }

    //搜索盒子
    .moon-inputs {
      position: relative;
      margin-top: 10px;
      width: 500px;
      height: 120px;
      // background: pink;

      //搜索图标
      .sosuo {
        position: absolute;
        top: 5px;
        left: 5px;
        display: block;
        color: #bec0c5;
        font-size: 20px;
      }

      // 搜索框
      input {
        display: block;
        width: 500px;
        height: 40px;
        padding-left: 30px;
        border-radius: 20px;
        margin: 0px auto;
        border: 0px;
        background: rgba(0, 0, 0, .2);
        box-shadow: 2px 2px 15px rgba(0, 0, 0, .25) inset;
        outline: none;
        color: #fff;
      }

      // 删除图标
      .del {
        position: absolute;
        top: 5px;
        right: 10px;
        color: #bec0c5;
        font-size: 20px;
      }


    }

    .xianshi {
      position: absolute;
      top: 150px;
      left: 20px;
      width: 450px;
      max-height: 180px;
      overflow: hidden;
      // background: rgba(12, 12, 12, 0.2);
      transition: all .4s linear;

      .xianitem {
        width: 100%;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        margin: 4px 0px;
        padding-left: 5px;
        border-radius: 2px;
        background: rgba(12, 12, 12, 0.1);
        transition: all .4s linear;

        &:hover {
          background: rgba(255, 255, 255, 0.2);

        }
      }
    }

    // 高亮盒子
    .container {
      overflow: hidden;
      z-index: 111111;
      font-size: 1111px;
      position: absolute;
      bottom: -300px;
      left: 50%;
      transform: translate(-50%);
      width: 500px;
      /* 100%窗口高度 */
      height: 200px;
      /* 弹性布局 水平垂直居中 */
      display: flex;
      justify-content: center;
      align-items: center;
      /* 渐变背景 自上而下 */
      // background: linear-gradient(to bottom, #2193b0, #6dd5ed);
      background: rgba(0, 0, 0, .0);
    }

    .container::before {
      content: "";
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 50%;
      z-index: 1;
      // border-top: 1px solid rgba(255, 255, 255, 0.5);
      /* 背景模糊 */
      // backdrop-filter: blur(5px);
    }

    .container .color {
      position: absolute;
      /* 模糊滤镜 数值越大越模糊 */
      filter: blur(200px);
    }

    .container .color:nth-child(1) {
      // background: #fd746c;
      width: 800px;
      height: 800px;
      top: -450px;
    }

    .container .color:nth-child(2) {
      // background: #cf8bf3;
      width: 600px;
      height: 600px;
      bottom: -150px;
      left: 100px;
    }

    .container .color:nth-child(3) {
      // background: #fdb99b;
      width: 400px;
      height: 400px;
      bottom: 50px;
      right: 100px;
    }

    ul {
      position: relative;
      display: flex;
      z-index: 2;
    }

    ul li {
      position: relative;
      list-style: none;
      margin: 10px;
    }

    ul li a {
      position: relative;
      width: 80px;
      height: 80px;
      display: inline-block;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      /* 盒子阴影 */
      // box-shadow: 0px 5px 45px rgba(0, 0, 0, 0.1);
      /* 背景模糊 */
      backdrop-filter: blur(2px);
      /* 加个动画过渡，动画才不会太过生硬 */
      transition: all 0.5s;
      overflow: hidden;

    }

    ul li a:hover {
      /* 鼠标移入元素沿Y轴上移 */
      transform: translateY(-20px);
    }

    /* 加个扫光动画 */
    ul li a::before {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      width: 50px;
      height: 100%;
      background-color: #fff;
      /* 元素沿X轴45横切，沿X轴右移150px */
      transform: skewX(45deg) translateX(150px);
      /* 动画过渡 */
      transition: all 0.5s;
    }

    ul li a:hover::before {
      /* 元素沿X轴45横切，沿X轴左移150px */
      transform: skewX(45deg) translateX(-150px);
    }


  }

  // 画布
  #canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: all 1s linear;
  }

  // 遮罩层
  &::before {
    content: '';
    background: hsla(0, 0%, 41%, .25);
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}

.vf {
  display: block;
  width: 70px;
  height: 70px;
  // background: pink;
  font-size: 50px;
  text-align: center;
}

/* 首页背景 end */
</style>